import {
  DragSortTable,
  PageContainer,
  ProTable,
} from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Space,
  Popconfirm,
  Tabs,
  message,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useRef, useState } from "react";
import styles from "./styles.less";
import Https from "@/utils/Https";
import { history } from "umi";
const Page = (props) => {
  const { dispatch, submitLoading } = props;
  // let venueList = venueArr.sort(function (a, b) {
  //   return a.venueStatus - b.venueStatus;
  // });
  const [open, setOpen] = useState(false);
  const [titleType, setTitleType] = useState(0);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef();
  const [dataList, setDataList] = useState([]);
  // useEffect(() => {
  //   dispatch({
  //     type: `${namespace}/pageInit`,
  //   });
  // }, []);

  const editInfo = (params) => {
    setTitleType(1);
    form.setFieldsValue(params);
    setOpen(true);
  };

  const deleteItem = (params) => {
    dispatch({
      type: `${namespace}/deleteItem`,
      params,
      callback: () => {
        actionRef.current?.reload();
      },
    });
  };
  //获取列表信息
  const getList = async (obj) => {
    setLoading(true);
    let records = [];
    let total = 0;
    let res = await Https.post("/venue/path/pathList", obj, true);
    setLoading(false);
    if (res.code == 200) {
      records = res.data.records;
      total = res.data.total;
    } else {
      message.error(res.msg);
    }
    setDataList(records);
    return {
      success: true,
      data: records,
      total: total,
    };
  };
  // useEffect(() => {
  //   if (venueList.length > 0) {
  //     setVenId(venueList[0].id);
  //   }
  // }, [venueList]);
  // useEffect(() => {
  //   actionRef.current && actionRef.current.reload();
  // }, [venId]);

  //排序
  const handleDragSortEnd = async (
    beforIndex,
    afterIndex,
    newDataSource: any
  ) => {
    let objList = [];
    newDataSource.map((item, index) => {
      objList.push({ id: item.id, pathSort: index });
    });
    let res = await Https.post("/venue/path/pathSort", objList, true);
    if (res.code == 200) {
      message.success("操作成功");
      actionRef.current && actionRef.current.reload();
    } else {
      message.error(res.msg);
    }
  };
  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    width: 300,
    render: (id, record) => {
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              history.push(`/stadium/path/details/${record.id}`);
            }}
          >
            详情
          </Button>
          <Button type="link" onClick={() => editInfo(record)}>
            编辑
          </Button>
          <Popconfirm
            title="确定要删除"
            onConfirm={() => deleteItem({ id: record.id })}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      );
    },
  };
  const submitForm = async () => {
    const res = await form.validateFields();
    if (res) {
      dispatch({
        type: `${namespace}/submitItem`,
        params: {
          ...res,
          // venueId: venId,
        },
        callback: () => {
          setOpen(false);
          actionRef.current?.reload();
        },
      });
    }
  };
  return (
    <PageContainer className={styles.stadiumPath}>
      {/* <Tabs
        defaultActiveKey="1"
        tabPosition={"top"}
        style={{ height: 220 }}
        onChange={(e) => {
          setVenId(e);
        }}
        items={venueList.map((item) => {
          return {
            label: item.venueName,
            key: item.id,
            disabled: item.venueStatus == 1,
          };
        })}
      /> */}

      <DragSortTable
        actionRef={actionRef}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              setTitleType(0);
              form.resetFields();
              setOpen(true);
            }}
            disabled={dataList.length == 10}
          >
            新建指引标题({dataList.length}/10)
          </Button>,
        ]}
        pagination={false}
        rowKey="id"
        loading={loading}
        dragSortKey="sort"
        onDragSortEnd={handleDragSortEnd}
        //scroll={{ x: 1000 }}
        request={async (params, sort, filter) => {
          return await getList({ ...params, ...sort });
        }}
        columns={calcColumns({ operate })}
      />

      <Modal
        open={open}
        title={titleType ? "编辑指引标题" : "新增指引标题"}
        forceRender
        width={800}
        destroyOnClose={true}
        onCancel={() => setOpen(!open)}
        footer={
          <Space>
            <Button
              onClick={() => {
                form.resetFields();
                setOpen(false);
              }}
            >
              取消
            </Button>
            <Button onClick={submitForm} loading={submitLoading} type="primary">
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item
            label="指引标题"
            name="pathName"
            rules={[{ required: true, message: "指引标题不能为空" }]}
          >
            <Input maxLength={5} placeholder="请输入指引名称,5个字以内" />
          </Form.Item>
          {/* <Form.Item label="路径描述" name="description">
            <TextArea
              showCount
              maxLength={200}
              style={{ height: 150, resize: "none" }}
              placeholder="请输入路径描述"
            />
          </Form.Item> */}
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
